<template>
  <div id='app'>
    <div v-show="CancelDeletion" class="CancelDeletion">取消删除!</div>
    <div v-show="SureToDelete" class="CancelDeletion">删除成功</div>
    <div class="Modal-box" v-show='show'>
      <div class="Modal-box-children">
        <div class="Modal-box-children-body">
          <p>{{list.title}}</p>
          <p>{{list.content}}</p>
          <div>
    <button @click="list.cancel">取消</button>
          <button @click="list.sure">确定</button>
          </div>
      
        </div>

      </div>
    </div>
   

  </div>
</template>

<script>
export default {
  data () {
    return {
      show:false,
      CancelDeletion:false,
      SureToDelete:false,
        list:{
        title:'提示删除',
        content:'删除内容吗？',
        cancel:()=>{

        },
        sure:()=>{

        }
       

        
      },
     
    }
  },
  methods: {
    qx(){
      this.CancelDeletion=false
    },
    qd(){
      this.SureToDelete=false
    }
   

  },
  mounted() {

  },
  components: {

  }
}
</script>

<style lang='scss'>
.Modal-box{
  width: 100vw;
  height: 100vw;
  background-color:rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;




}
.Modal-box-children{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Modal-box-children-body{
  width: 300px;
  height: 300px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  p{
    margin: 10px 0;
  }
  button{
    margin: 0 10px;
  }

}
.CancelDeletion{
  position: fixed;
  top: 20px;
  left: 50%;
  border: 1px solid red;
  background-color: rgb(209, 209, 209);
  padding: 5px 10px;
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

}
</style>
